<template>
  <div class="c-bg-white" v-if="feedTop">
    <!-- 头部 -->
    <div class="c-ph24 c-pb24">
      <div class="c-fs30 c-fc-xblack c-fw600 c-mt30">{{clockinInfo.name}}</div>
      <div class="c-fs22 c-fc-gray c-mt10">{{clockinInfo.signCardStartAt}} 至 {{clockinInfo.signCardEndAt}}</div>
      <div class="c-fc-xblack c-fs24 c-mt20" :class="isFold ? 'editor-con-fold':''" id="J_editor" v-html="clockinInfo.details"></div>
      <div v-if="isShowFoldBtn" @click="toggleFold" class="c-flex-row c-justify-center c-aligni-center c-mt20">
        <span class="c-fs24 c-fc-gray c-mr6">{{isFold ? '展开':'收起'}}</span>
        <i class="iconfont c-fs20 c-fc-gray arrow-rotate" :class="isFold ? 'fold':''">&#xe6ab;</i>
      </div>
    </div>
    <!-- 动态列表 -->
    <div class="border-top">
      <!-- 没有权限 -->
      <div v-if="!feedTop.hasPermission" class="permission-none">
        <div class="msg-tip c-flex-row c-aligni-center c-justify-center c-fc-xblack"><i class="iconfont c-mr12 c-fc-gray">&#xe6ae;</i>没有权限参与打卡，加入圈子即可查看打卡内容</div>
        <div class="circle-info c-flex-column c-aligni-center c-mt40">
          <div class="c-ww144 c-hh144 c-p">
            <img :src="$addXossFilter(feedTop.avatar)" class="c-w100 c-h c-br20" />
            <div class="lock-icon">
              <div class="detail c-flex-row c-aligni-center c-justify-center"><i class="iconfont c-fc-white c-fs24">&#xe631;</i></div>
            </div>
          </div>
          <p class="c-fs30 c-fw500 c-mt20">{{feedTop.name}}</p>
          <div class="c-flex-row c-aligni-center c-fs20 c-fc-gray c-mt10">{{feedTop.feedCount | formatTenThousand}}动态 | {{feedTop.memberCount | formatTenThousand}}成员</div>
        </div>
      </div>
      <template v-else>
        <div class="border-l c-fs30 c-fc-xblack c-p c-mh24">已经提交动态</div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-p theme-bg-gradient18002 c-br20 c-mb20 c-mt30 c-pv18 c-mh24 c-ph24 c-pv14">
          <div class="c-p c-flex-1">
            <input type="text" v-model="searchNickname" class="search-input" placeholder="请输入学员名称" />
            <i @click="searchConfirm" class="iconfont c-fs32 c-fc-sgray c-pa c-p-r10 c-p-tp50 c-translate-y-50">&#xe6d6;</i>
          </div>
          <div @click="isShowFilter = true" class="c-flex-shrink0 c-flex-row c-flex-center c-ml20 c-fs22 c-fc-sblack">
            筛选<i class="iconfont c-fs18 c-fc-sblack c-ml4 c-inlineblack">&#xe601;</i>
          </div>
        </div>
        <circle-common-list :isShowDynamic="false" :isShowTopBar="false" :feedList="feedList" :feedTop="feedTop" :playAduioSrc="playAduioSrc" :progress="progress" :isShowSelect="false"
          @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @handleClickForward="handleClickForward" @like="like"
          @handleClickOperation="handleClickOperation" @getCircleComment="getCircleComment" @getFeedsDetail="getFeedsDetail" @handleClickThemeRoute="handleClickThemeRoute"
          @clickGoLiveDetail="clickGoLiveDetail"></circle-common-list>
        <!-- list列表 -->
        <loading-status-tem v-if="(feedTop.hasPermission || feedTop.role == 2)" :dataStatus="dataStatus" noDataText="暂无数据" class="c-bg-white"></loading-status-tem>
      </template>
    </div>
    <div class="c-hh80"></div>
    <div v-if="feedTop.hasPermission" class="mod-footer-nav c-pf c-flex-row c-aligni-center c-pv12 c-ph12 c-p-l0 c-p-r0 c-p-b0 c-bg-white">
      <div class="c-flex-shrink0 c-flex-row c-mr20">
        <div @click="openColumn" class="c-textAlign-c c-ph14">
          <i class="iconfont c-fs26">&#xe79a;</i>
          <p class="c-fc-xblack c-fs20">目录</p>
        </div>
      </div>
      <div @click="jumpToRelease" class="theme-bg c-fc-white c-br30 c-flex-row c-justify-center c-aligni-center c-flex-1 c-fs28 c-hh64" :class="clockinInfo.status >= 1 ? 'c-opacity50':''">打卡</div>

    </div>
    <div v-else class="mod-footer-nav c-pf c-flex-row c-aligni-center c-pv12 c-ph12 c-p-l0 c-p-r0 c-p-b0 c-bg-white">
      <div @click="jumpToCircleFeed" class="theme-bg c-fc-white c-br30 c-flex-row c-justify-center c-aligni-center c-flex-1 c-fs28 c-hh64">加入圈子</div>
    </div>
    <!-- 浮动按钮 -->
    <div v-if="feedTop.hasPermission" class="theme-box-shadow c-pf c-pz1 c-p-b240 c-p-c-216 c-ww70 c-hh70 theme-bg c-flex-row c-justify-center c-aligni-center c-brp50" @click="handleClickCircleFeed">
      <i class="iconfont c-fc-white c-fs34">&#xe6bc;</i>
    </div>
    <!-- 音频 -->
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <!-- 视频 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc"></video-popup>
    <!-- 海报 -->
    <circle-poster ref="circlePoster" :qrcodeImg="qrcodeImg"></circle-poster>
    <!-- 置顶，精华，隐藏 -->
    <open-modal :openModal="showMoreActions" @closeModal="closeMoreActions">
      <div class="c-br-tl20 c-pt40 c-br-tr20 c-text-hidden c-w100 c-bg-sgray">
        <div class="c-w100 c-flex-row c-flexw-wrap c-ph14">
          <template v-for="(item, index) in moreActions">
            <div class="c-flex-column c-aligni-center c-justify-center c-hh138 c-bg-white c-br20 c-mh10 c-mb40 c-ww130" v-if="item.isshow == true"
              @click="getHandleFeeds(item.updateField, item.status, item.circleFeedsId, item.isClick, item.themeId)" :key="index">
              <i class="iconfont c-fs36" :class="[item.icon, item.color]"></i>
              <div class="c-fs24 c-w100 c-mt12 c-textAlign-c" :class="item.fontColor">{{item.title}}</div>
            </div>
          </template>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs26 c-fc-xblack c-bg-white" @click="closeMoreActions">取消</div>
      </div>
    </open-modal>
    <!-- 全部评论 -->
    <open-modal class="c-pz100" :openModal='showCircleComment' @closeModal='closeAddAllComment()'>
      <div class="masker-content c-br-tl20 c-br-tr20 c-p c-pb100">
        <div class="c-w100 c-textAlign-c c-fs28 c-lh40 c-pt24 c-fc-xblack c-fw-b c-pb34">全部评论({{currentCommentCount | formatTenThousand}})</div>
        <i class="iconfont c-pa c-p-t30 c-p-r24 c-fc-sgray c-fs20 c-bg-f6 c-ww30 c-hh30 c-lh30 c-textAlign-c c-brp50 c-flex-row c-flex-center" @click="closeAddAllComment()">&#xe8fd;</i>
        <div class="c-maxh760 c-contexty-scroll c-ph24" @scroll="getCommentsModal" id="commentModal">
          <circle-comment @loadMoreComments="loadMoreComments" @getCommentOperation="getCommentOperation" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"
            @handleClickCircleIndex="handleClickCircleIndex" :comments="comments" :playAduioSrc="playAduioSrc" :progress="progress"></circle-comment>
          <loading-status-tem :class="commentDataStatus == 'NO_DATA' ? 'c-mt-160' : ''" :dataStatus="commentDataStatus" noDataText="暂无评论"></loading-status-tem>
        </div>
        <div class="c-pa c-w100 c-p-l0 c-p-b0 c-fc-sgray c-ph40 c-pv24 c-fs24 box-shadow" @click="showAddCommentModal()">
          <i class="iconfont c-mr12">&#xe90e;</i><span>说点什么吧~</span>
        </div>
      </div>
    </open-modal>
    <!-- 添加评论 -->
    <circle-add-comment ref="circleAddComment" class="c-pz101" :showAddComment="showAddComment" :addComment="addComment" :replyInfo="operationComment" @closeAddComment="closeAddComment"
      @sendComment="sendComment" @playAddCommentVideo="playAddCommentVideo"></circle-add-comment>
    <!-- 评论操作弹窗 -->
    <open-modal class="c-pz101" :openModal='showOperaction' @closeModal='showOperaction = false'>
      <div class="c-br-tl20 c-br-tr20 c-pb60 c-ph24 c-text-hidden c-w100 c-bg-sgray">
        <div class="c-w100 c-flex-row c-aligni-center">
          <div class="c-flex-column c-aligni-center c-justify-center c-ww100 c-pv40 c-mr20" @click="addReply">
            <div class="c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-bg-white c-brp50"><i class="iconfont c-fc-xblack c-fs36">&#xe99c;</i></div>
            <span class="c-fs24 c-fc-gray c-w100 c-mt12 c-textAlign-c">回复</span>
          </div>
          <div class="c-flex-column c-aligni-center c-justify-center c-ww100 c-pv40 c-mr20" @click="deleteComment">
            <div class="c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-bg-white c-brp50"><i class="iconfont c-fc-xblack c-fs36">&#xe6b3;</i></div>
            <span class="c-fs24 c-fc-gray c-w100 c-mt12 c-textAlign-c">删除</span>
          </div>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs24 c-fc-xblack c-bg-white c-br40" @click="showOperaction = false">取消</div>
      </div>
    </open-modal>
    <!-- 筛选条件 -->
    <open-modal class="c-pz100" :openModal='isShowFilter' @closeModal='isShowFilter = false'>
      <div class="c-bg-white model-filter">
        <div v-for="(item,index) in filterArr" :key="index" @click="chooseFilter(item.val, index)" class="item c-fc-sblack" :class="filterIndex==index ? 'theme-fc':''">{{item.title}}</div>
      </div>
    </open-modal>
    <!-- 目录 -->
    <learn-column ref="circleLearnColumn" :planId="clockinInfo.planId" :circleId="circleId"></learn-column>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import circleUtils from '@/utils/circleUtils.js';
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import circleCommonList from "@/components/homePage/circle/circleCommonList.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import circlePoster from "@/components/homePage/circle/circlePoster.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import circleAddComment from "@/components/homePage/circle/circleAddComment.vue";
import circleComment from "@/components/homePage/circle/circleComment.vue";
import learnColumn from "@/components/templates/circle/learnColumn";
const LIMIT = 10;
let pageIndex = 1;
let page = 1;
let commentPage = 1;
let childCommentChangeArr = [];
let isAddComment = false; // 判断是否是增加评论
let cIndex = 0; // 判断当前评论的索引
let getType = 1; // 评论获取类型 1是正常分页加载 2是操作刷新数据
let isFilterComment = false; // 判断是否删除数据
export default {
  name: "CircleIndex",
  components: {
    loadingStatusTem,
    circleCommonList,
    videoPopup,
    circlePoster,
    OpenModal,
    circleAddComment,
    circleComment,
    learnColumn
  },
  data() {
    return {
      circleId: "",
      circleMemberId: "",
      essenceCount: "", //精华数
      topCount: "", //置顶数
      zansCount: "", //点赞数
      feedCount: "", //动态数
      userInfo: null, //个人数据
      dataStatus: 'HAS_MORE_DATA',
      feedList: [],
      feedTop: null,
      status: 1, //默认正常1，-1拉入黑名单
      isExit: 1, //默认正常1，-1退出圈子
      isShowDynamic: true,
      playAduioSrc: "", //音频地址
      progress: 0,
      isPlayingAudio: false,
      showVideo: false,
      currentVideoObj: {},
      qrcodeImg: "",
      moreActions: [],
      showMoreActions: false,
      showCircleComment: false, // 展示评论
      showAddComment: false, // 添加评论
      addComment: { // 添加评论
        text: '',
        img: []
      },
      operationComment: null, // 当前操作信息
      comments: [], // 全部评论信息
      commentDataStatus: 'HAS_MORE_DATA', // 一级评论数据状态
      currentCommentCount: 0, // 当前评论条数
      showOperaction: false, // 展示评论操作
      circleFeedsId: '', // 当前点击的圈子
      indexScrollTop: 0, //滚动定位位置
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      sendCommentFlag: false,
      clockinInfo: {},
      isShowFoldBtn: false,
      isFold: false,
      isShowFilter: false,
      filterArr: [{
        title: '全部',
        val: 0
      }, {
        title: '精选',
        val: 1
      }],
      filterIndex: 0,
      searchNickname: ""
    }
  },
  watch: {
    searchNickname(val) {
      if (!val) {
        this.initData();
      }
    },
    $route() {
      this._initCreated();
    }
  },
  beforeRouteLeave(to, from, next) {
    this.indexScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    if (to.path == '/homePage/circle/circleDetail' || to.path == '/homePage/circle/circleTheme') {
      sessionStorage.setItem('indexScrollTop', this.indexScrollTop);
    } else {
      sessionStorage.removeItem('indexScrollTop');
    }
    next();
  },
  created() {
    this._initCreated();
  },
  mounted() {
  },
  destroyed() {
    this.$previewImg.hide();
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  methods: {
    _initCreated() {
      this.circleId = this.$route.query.circleId || "";
      // this.circleMemberId = this.$route.query.circleMemberId || "";
      this._clockinId = this.$route.query.clockinId;
      this._refereeId = this.$route.refereeId;
      this.status = 1;
      this.isExit = 1;
      this.isShowDynamic = true;
      this.playAduioSrc = "";
      this.progress = 0;
      this.isPlayingAudio = false;
      this.showVideo = false;
      this.currentVideoObj = {};
      this.qrcodeImg = "";
      this.moreActions = [];
      this.showMoreActions = false;
      this.showCircleComment = false;
      this.showAddComment = false;
      this.addComment = {
        text: "",
        img: []
      }
      this.showOperaction = false;
      this.circleFeedsId = "";
      this.indexScrollTop = sessionStorage.getItem('indexScrollTop') || 0;
      this.sendCommentFlag = false;
      // this.userInfo = null;
      this.essenceCount = "";
      this.topCount = "";
      this.zansCount = "";
      this.feedCount = "";
      this.feedTop = null;
      this._filterType = 0;
      this.initData();
      window.addEventListener('scroll', this.windowScrollFunction);
      this._getClockinInfo().then(() => {
        setDocumentTitle(this.clockinInfo.name);
        this.getDetails(1).then(() => {
          this.wechatShare();
          utilJs.appShare(this);
          this._setEditorRect();
        });
      });
    },
    chooseFilter(val, index) {
      this._filterType = val;
      this.filterIndex = index;
      this.isShowFilter = false;
      this.initData();
    },
    toggleFold() {
      this.isFold = !this.isFold
    },
    //跳转圈子主详情页
    jumpToCircleFeed() {
      let query = {
        id: this.circleId,
      }
      if (this._refereeId) {
        query.refereeId = this._refereeId;
      }
      this.$routerGo(this, "replace", {
        path: "/homePage/circle/circleFeed",
        query: query
      })
    },
    searchConfirm() {
      this._filterType = 0;
      this.initData();
      // clearTimeout(this._searchTimer);
      // this._searchTimer = setTimeout(() => {

      // }, 750)
    },
    // 邀请好友
    inviteFriends: function () {
      let ckFrom = global.ckFrom.circle;
      let extId = this.circleId;
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: 0, extId: extId, ckFrom: ckFrom }
      });
    },
    openColumn() {
      this.$refs.circleLearnColumn.open();
    },
    jumpToRelease() {
      if (this.clockinInfo.status == 1) {
        this.$showCjToast({
          text: "打卡未开始",
          type: "warn",
        });
      } else if (this.clockinInfo.status == 2) {
        this.$showCjToast({
          text: "您已打过卡",
          type: "warn",
        });
      } else if (this.clockinInfo.status == 3) {
        this.$showCjToast({
          text: "打卡已过期",
          type: "warn",
        });
      } else {
        circleUtils.addPlanMember(this.circleId, this.clockinInfo.planId).then(() => {
          this.$routerGo(this, "push", {
            path: "/homePage/circle/circleRelease",
            query: {
              id: this.circleId,
              clockinId: this._clockinId
            }
          })
        })
      }
    },
    _setEditorRect() {
      setTimeout(() => {
        this._editorRect = document.getElementById("J_editor").getBoundingClientRect();
        if (this._editorRect.height > 400) {
          this.isShowFoldBtn = true;
          this.isFold = true;
        }
      }, 750)
    },
    _getClockinInfo() {
      return new Promise(resolve => {
        utilJs.getMethod(`${global.apiurl}circle/getSignCard/${this._clockinId}`, res => {
          this.clockinInfo = res;
          resolve();
        })
      })
    },
    // // 请求访问日志接口
    // addVisitLog() {
    //   utilJs.postMethod(global.apiurl + `circle/addVisitLog`, {
    //     circleId: this.circleId,
    //     circleMemberId: this.circleMemberId
    //   }, res => { })
    // },
    handleClickPlaint() {
      this.$store.commit('updateShowComplaint', true);
    },
    clickGoLiveDetail(liveId, liveType) {
      let toPath = ''
      if (liveType == 1) {
        toPath = `/homePage/live/livePersonalDetail?liveId=${liveId}`
      } else if (liveType == 2) {
        toPath = `/homePage/live/liveDetail?liveId=${liveId}`;
      } else {
        toPath = `/homePage/privateClass/classDetail?classId=${liveId}`;
      }
      this.$routerGo(this, 'push', {
        path: toPath
      })
    },
    handleClickCircleIndex(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleIndex",
        query: {
          circleId: this.circleId,
          circleMemberId: item.circleMemberId
        }
      })
    },
    handleClickCircleFeed() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this.circleId
        }
      })
    },
    // 修改评论的count值
    changeCommentCount(circleFeedsId, count) {
      this.feedList.forEach((item, index) => {
        if (item.circleFeedsId == circleFeedsId) {
          this.$set(this.feedList[index], 'commentCount', count);
        }
      })
    },
    // 播放添加评论的视频
    playAddCommentVideo(currentVideoObj) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = currentVideoObj
    },
    // 发送评论
    sendComment(comment) {
      if (this.sendCommentFlag) return;
      this.sendCommentFlag = true;
      let data = {
        circleFeedsId: this.circleFeedsId,
        circleId: this.circleId,
        parentId: this.operationComment ? this.operationComment.commentId : 0,
        rootCId: this.operationComment ? this.operationComment.rootCId : 0,
        replyUserId: this.operationComment ? this.operationComment.userId : 0,
        content: comment.text,
        img: comment.img,
        audio: comment.audio,
        audio_time: comment.audio_time,
        video: comment.video,
        grade: this.operationComment ? 2 : 1,
        type: this.operationComment ? 2 : 1,
        fileId: comment.fileId
      }
      utilJs.postMethod(`${global.apiurl}circle/addCircleFeedComments`, data, res => {
        this.$showCjToast({
          text: res.msg,
          type: "success",
        });
        this.sendCommentFlag = false;
        this.showAddComment = false;
        this.currentCommentCount++;
        this.changeCommentCount(this.circleFeedsId, this.currentCommentCount);
        this.getCircleCommentList(this.circleFeedsId);
        if (!this.operationComment) {
          circleUtils.togglePoints({ actId: res.commentId, actType: 2, handleType: 1, sourceType: 5 }, this.circleId, this)
        }
      }, failRes => {
        this.sendCommentFlag = false;
      })
    },
    // 关闭添加评论
    closeAddComment() {
      this.showAddComment = false;
    },
    // 获取操作评论索引
    getCommentOperation(item) {
      this.operationComment = item;
      // 没有删除权限,点击直接回复
      if (item.delPermission) {
        this.showOperaction = true;
      } else {
        this.addReply();
      }
      let cId = item.rootCId;
      this.comments.forEach((cItem, index) => {
        if (cItem.commentId == cId) {
          cIndex = index;
        }
      })
    },
    // 加载更多次级评论列表
    loadMoreComments(index) {
      this.$set(this.comments[index], 'isTotalShow', true);
    },
    closeAddAllComment() {
      this.showCircleComment = false;
      getType = 1;
    },
    // 删除评论
    deleteComment() {
      let comment = this.operationComment;
      utilJs.getMethod(`${global.apiurl}circle/delCircleComments/${comment.commentId}`, res => {
        this.showOperaction = false;
        this.$showCjToast({
          text: "删除成功",
          type: "success",
        });
        getType = 2;
        if (comment.rootCId == comment.commentId) {
          isFilterComment = true;
          let comments = this.comments.filter(item => item.commentId != comment.commentId);
          this.comments = comments;
        }
        this.getCircleCommentList(this.circleFeedsId);
        let commentCount = (comment.childCommentCount ? comment.childCommentCount : 0) + 1;
        this.currentCommentCount = this.currentCommentCount - commentCount;
        this.changeCommentCount(this.circleFeedsId, this.currentCommentCount);
        circleUtils.togglePoints({ actId: comment.commentId, actType: 2, handleType: 2, sourceType: 5 }, this.circleId, this)
      })
    },
    // 回复评论
    addReply() {
      this.showOperaction = false;
      this.showAddComment = true;
      getType = 2;
      this.addComment = { // 添加评论
        text: '',
        img: [],
      }
      this.$nextTick(() => {
        this.$refs.circleAddComment.$refs.contentArea.focus();
      })
    },
    handleClickThemeRoute(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleTheme",
        query: {
          themeId: item.themeId
        }
      })
    },
    // 无权限且为付费模式
    goBuyPay(item) {
      let _this = this;
      this.$cjConfirm({
        title: '提示', //
        titleCenter: true, //标题是否居中
        message: '该主题设置了付费后参与,请先完成支付',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '去支付', //确认按钮文本
        onConfirm() {
          let queryT = null;
          queryT = {
            cId: 0,
            extId: item.themeId,
            ckFrom: global.ckFrom.circleTheme,
            extraId: 0,
          }
          _this.$routerGo(_this, "push", {
            path: "/homePage/course/coursePay",
            query: queryT
          });
          return true;
        },
        onCancel() {
        },
      })
    },
    // 跳转动态详情ye
    getFeedsDetail(item, event) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (item.joinType == 2 && !item.isJoin) {
        // 无权限且为付费模式
        this.goBuyPay(item)
      } else {
        if (event.target.className.includes('link')) {
          let href = event.target.outerText;
          utilJs.locationHref(href);
          return;
        } else {
          this.$routerGo(this, "push", {
            path: "/homePage/circle/circleDetail",
            query: {
              circleFeedsId: item.circleFeedsId,
            }
          })
        }
      }
    },
    // 获取评论列表
    getCircleCommentList(circleFeedsId) { // commentType=1一级评论 commentType=2二级评论; getType评论获取类型 1是正常分页加载 2是操作刷新数据
      let showMoreIndex = '';
      if (getType == 1) {
        if (this.commentDataStatus == 'LOADING') {
          return;
        }
        this.commentDataStatus = 'LOADING';
      } else {
        if (this.comments && this.comments[cIndex] && this.comments[cIndex].isTotalShow == true) {
          showMoreIndex = cIndex;
        }
      }
      let page = getType == 1 ? commentPage : parseInt(cIndex / 10) + 1;
      utilJs.getMethod(`${global.apiurl}circle/getCircleFeedComments?circleFeedsId=${circleFeedsId}&commentType=1&parentId=${circleFeedsId}&page=${page}`, res => {
        this.showCircleComment = true;
        let resList = res.data || [];
        if (resList && resList.length > 0) {
          childCommentChangeArr = [];
          for (let i = 0; i < resList.length; i++) {
            resList[i].isTotalShow = false;
            resList[i].createdAt = utilJs.changeCommentTime(resList[i].createdAt);
            if (resList[i].chileComment && resList[i].chileComment.length > 0) {
              this.commentChange(resList[i].chileComment);
              resList[i].replyList = childCommentChangeArr;
              resList[i].childCommentCount = resList[i].replyList.length;
              childCommentChangeArr = [];
            }
            resList[i].childCommentCount = resList[i].replyList ? resList[i].replyList.length : 0;
          }
        }
        if (getType == 2) {
          if (isAddComment && isFilterComment == false) {
            this.comments.unshift(resList[0]);
            isAddComment = false;
          } else if (isAddComment == false && isFilterComment == false && this.comments && this.comments.length > 0) {
            this.$set(this.comments, cIndex, resList[cIndex % 10]);
            if (!(showMoreIndex === '')) {
              this.$set(this.comments[showMoreIndex], 'isTotalShow', true);
              showMoreIndex = '';
            }
          } else if (isFilterComment) {
            isFilterComment = false;
            if (resList && resList.length > 0) this.comments.push(resList[resList.length - 1]);
          }
          getType = 1;
          cIndex = 0;
        } else {
          if (commentPage == 1) {
            this.comments = resList;
          } else {
            this.comments = [...this.comments, ...resList];
          }
          if ((res.total > this.comments.length) && (res.total != 0)) {
            commentPage++;
          }
        }
        if (this.comments && this.comments.length > 0) this.comments = this.unique(this.comments);
        if (res.total == this.comments.length) {
          this.commentDataStatus = res.total == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.commentDataStatus = 'HAS_MORE_DATA';
        }
      }, failRes => {
        this.commentDataStatus = "DATA_ERROR";
      })
    },
    // 评论去重
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.commentId) && res.set(arr.commentId, 1))
    },
    // 解构评论列表
    commentChange(commentArr) {
      for (let i = 0; i < commentArr.length; i++) {
        if (commentArr[i].isShow == -1) continue;
        commentArr[i].createdAt = utilJs.changeCommentTime(commentArr[i].createdAt);
        childCommentChangeArr.push(commentArr[i]);
        if (commentArr[i].chileComment && commentArr[i].chileComment.length > 0) {
          this.commentChange(commentArr[i].chileComment)
        }
      }
    },
    // 下拉到底部加载更多
    getCommentsModal(callBack) {
      if (!(this.commentDataStatus == 'HAS_MORE_DATA' && this.comments.length > 0)) {
        return
      }
      let commentModal = document.getElementById('commentModal');
      if (!commentModal) {
        return
      }
      if ((commentModal.scrollHeight - (commentModal.scrollTop + commentModal.clientHeight)) <= 20) {
        this.getCircleCommentList(this.circleFeedsId);
      }
    },
    // 点击评论
    showAddCommentModal() {
      getType = 2;
      isAddComment = true;
      cIndex = 0;
      this.addComment = { // 添加评论
        text: '',
        img: [],
      }
      this.showAddComment = true;
      this.operationComment = null;
      this.$nextTick(() => {
        this.$refs.circleAddComment.$refs.contentArea.focus();
      })
    },
    // 获取一级评论
    getCircleComment(circleFeedsId, commentCount) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.operationComment = null;
      this.currentCommentCount = Number(commentCount);
      this.circleFeedsId = circleFeedsId;
      this.commentDataStatus = "HAS_MORE_DATA";
      this.comments = [];
      isAddComment = false;
      isFilterComment = false;
      commentPage = 1;
      cIndex = 0;
      this.getCircleCommentList(this.circleFeedsId);
    },
    closeMoreActions() {
      this.showMoreActions = false;
    },
    getHandleFeeds(updateField, status, circleFeedsId, isClick, themeId) {
      let _this = this;
      if (isClick == false) {
        return;
      }
      if (updateField == "delete") {
        this.showMoreActions = false;
        this.$cjConfirm({
          title: '确定删除？', //
          titleCenter: true, //标题是否居中
          message: '删除后，发布的内容将无法恢复',
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '', //确认按钮文本
          onConfirm: () => {
            _this.delCircleFeed(circleFeedsId);
            //删除关联积分
            circleUtils.togglePoints({ actId: circleFeedsId, actType: 1, handleType: status == 1 ? 1 : 2, sourceType: 5 }, this.circleId, this)
          },
          onCancel() {
          },
        })
      } else if (updateField == 'edit') {
        let query = {
          id: this.circleId,
          feedsId: circleFeedsId,
        }
        if (themeId) {
          query.themeId = themeId
        }
        this.$routerGo(this, "push", {
          path: "/homePage/circle/circleRelease",
          query: query
        })
      } else {
        this.handleFeeds(updateField, status, circleFeedsId)
      }
    },
    // 删除圈子
    delCircleFeed(circleFeedsId) {
      let _this = this;
      utilJs.getMethod(`${global.apiurl}circle/delCircleFeed/${circleFeedsId}`, res => {
        this.showMoreActions = false;
        this.$showCjToast({
          text: "操作成功",
          type: "success",
        })
         _this.initData();
      })
    },
    // 操作圈子置顶，精华，隐藏
    handleFeeds(updateField, status, circleFeedsId) {
      let _this = this;
      utilJs.postMethod(global.apiurl + `circle/handleFeeds/${circleFeedsId}`, {
        updateField: updateField,
        status: status
      }, res => {
        this.showMoreActions = false;
        if (updateField == 'isEssence') {
          //精选操作关联积分
          circleUtils.togglePoints({ actId: circleFeedsId, actType: 1, handleType: status == 1 ? 1 : 2, sourceType: 2 }, this.circleId, this)
        }
        this.$showCjToast({
          text: "操作成功",
          type: "success",
        })
        _this.initData();
      })
    },
    handleClickOperation(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      // 当我是圈主身份的时候可操作内容
      if (this.feedTop.role == 2) {
        this.moreActions = [
          {
            icon: item.isEssence == 1 ? "icon-yichujingxuan" : "icon-yirujingxuan",
            title: item.isEssence == 1 ? "移出精选" : "移入精选",
            updateField: "isEssence",
            isshow: true,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isEssence == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-zhiding1",
            title: item.isTop == 1 ? "取消置顶" : "置顶",
            updateField: "isTop",
            isshow: true,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isTop == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-yincang1",
            title: item.status == 1 ? "隐藏" : "取消隐藏",
            updateField: "status",
            isshow: true,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            status: item.status == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: item.isSelf,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            circleFeedsId: item.circleFeedsId
          }
        ];
      } else if (this.feedTop.role == 1 && this.feedTop.isAnswer == 1 && this.companyAuth.enableQuestionModule == 1) {
        this.moreActions = [
          {
            icon: item.isEssence == 1 ? "icon-yichujingxuan" : "icon-yirujingxuan",
            title: item.isEssence == 1 ? "移出精选" : "移入精选",
            updateField: "isEssence",
            isshow: this.feedTop.isAllowTopEssence == 1 ? true : false,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isEssence == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-zhiding1",
            title: item.isTop == 1 ? "取消置顶" : "置顶",
            updateField: "isTop",
            isshow: this.feedTop.isAllowTopEssence == 1 ? true : false,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isTop == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-yincang1",
            title: item.status == 1 ? "隐藏" : "取消隐藏",
            updateField: "status",
            isshow: this.feedTop.isAllowHideFeeds == 1 ? true : false,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            status: item.status == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: item.isSelf,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            circleFeedsId: item.circleFeedsId
          }
        ];
      } else if (this.feedTop.hasPermission && item.isSelf == true) {
        this.moreActions = [
          {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: true,
            circleFeedsId: item.circleFeedsId
          }
        ]
      }
      if (item.isSelf == true && !item.questionDetailId) {
        //动态是自己
        this.moreActions.push({
          icon: "icon-bianji",
          title: "编辑",
          updateField: "edit",
          isshow: true,
          color: 'c-fc-black',
          fontColor: 'c-fc-xblack',
          circleFeedsId: item.circleFeedsId,
          themeId: item.themeId
        });
      }
      this.showMoreActions = true;
    },
    // 点赞
    like(index) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (this.feedList[index].isZans) {
        this.feedList[index].isZans = false;
        this.feedList[index].likeCount--;
        this.addZans(this.feedList[index].circleFeedsId);
        circleUtils.togglePoints({ actId: this.feedList[index].circleFeedsId, actType: 1, handleType: 2, sourceType: 6 }, this.circleId, this)
      } else {
        this.feedList[index].isZans = true;
        this.feedList[index].likeCount++
        this.addZans(this.feedList[index].circleFeedsId);
        circleUtils.togglePoints({ actId: this.feedList[index].circleFeedsId, actType: 1, handleType: 1, sourceType: 6 }, this.circleId, this)
      }
    },
    // 触发点赞接口
    addZans(circleFeedsId) {
      utilJs.postMethod(global.apiurl + `circle/addZans/${this.circleId}`, {
        circleFeedsId: circleFeedsId,
      }, res => {
        // this.getUserIndexInfo();
      })
    },
    // 判断是否有权限
    isHasPermission() {
      // role：1=成员；2=圈主  status：1=正常；-1=拉入黑名单  isExit:1=正常；-1=退出了圈子
      if (this.feedTop.hasPermission == false && this.status == 1) {
        this.$showCjToast({
          text: "加入圈子可参与互动",
          type: "warn",
        });
        return true;
      } else if (this.feedTop.hasPermission == false && this.status == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else if (this.feedTop.isExit == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    isSignOut() {
      // 黑名单
      if (this.status == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    // 转发生成图片
    getFeedsQRCode(item) {
      let circleFeedsId = item.circleFeedsId;
      utilJs.getMethod(`${global.apiurl}circle/getFeedsQRCode/${circleFeedsId}`, res => {
        this.qrcodeImg = "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(res.qrCodeUrl)))
        this.$refs.circlePoster.handleClickPoster(item);
      })
    },
    // 转发圈子
    handleClickForward(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.getFeedsQRCode(item)
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.feedList.length > 0) {
          if (this.feedList.length >= 10 && !(this.feedTop.hasPermission == 1 || this.feedTop.hasPermission == 2)) {
            return
          } else {
            this.getFeedsList();
          }
        }
      });
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    // 点击播放视频
    clickShowVideo(videoSrc) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = { videoSrc }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      //播放结束自动播放下一个非自己发的语音并且非已读语音
      this.playAduioSrc = "";
      this.progress = 0;
      document.getElementById("audio").src = this.playAduioSrc;
      this.isPlayingAudio = false;
    },
    clickPlayAudio(audioUrl, audioTime) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;
      this.progress = 0;
      //返回mp3则用audio播放，否则将使用微信将文件下载然后播放
      if (this.playAduioSrc.includes("http") || !this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
        audio.removeEventListener("ended", this.playAudioEnd, false);
        audio.addEventListener("ended", this.playAudioEnd, false);
      }
      this.isPlayingAudio = true;
    },
    // 点击图片放大预览
    clickPreviewImage(imgUrl, itemImgList, imgIndex) {
      if (!imgUrl) {
        return;
      }
      let imgUrlList = [];
      for (let key of itemImgList) {
        if (key) {
          imgUrlList.push(key);
        }
      }
      // this.$previewImg({
      //   activeIndex: imgIndex,
      //   imgList: imgUrlList
      // })
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
    },
    // 获取接口数据
    getDetails(type) {
      return new Promise(resolve => {
        utilJs.getMethod(`${global.apiurl}circle/details/${this.circleId}?type=${type}`, res => {
          if (res.deletedStatus == -1) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "circle",
                info: '该圈子已被删除,请联系管理员'
              }
            });
            return
          }
          if (res.isShow == -1) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "circle",
                info: '该圈子已被隐藏,请联系管理员'
              }
            });
            return
          }
          this.feedTop = res;
          this.status = res.status || 1;//圈子黑名单1，正常，-1拉入黑名单
          this.isExit = res.isExit || 1;//圈子1正常，-1退出圈子
          this.isShowDynamic = res.hasPermission;
          // this.circleMemberId = res.circleMemberId;
          resolve();
          // if (this.feedTop.role != 0) {
          //   this.addVisitLog()
          // }
        })
      })

    },
    // getUserIndexInfo() {
    //   utilJs.getMethod(`${global.apiurl}circle/getUserIndexInfo?circleId=${this.circleId}&circleMemberId=${this.circleMemberId}`, res => {
    //     this.essenceCount = res.essenceCount;
    //     this.feedCount = res.feedCount;
    //     this.topCount = res.topCount;
    //     this.zansCount = res.zansCount;
    //     this.userInfo = res.userInfo;
    //     this.wechatShare();
    //   })
    // },
    initData() {
      pageIndex = 1;
      page = 1;
      commentPage = 1;
      this.commentDataStatus = "HAS_MORE_DATA";
      this.dataStatus = 'HAS_MORE_DATA';
      this.feedList = [];
      this.getFeedsList();
      // this.getUserIndexInfo();
      document.documentElement.scrollTop = 0;
      sessionStorage.removeItem('indexScrollTop');
    },
    // 获取动态列表
    getFeedsList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      // index=${pageIndex}&searchType=0&page=${page}&limit=${LIMIT}
      utilJs.postMethod(`${global.apiurl}circle/getSignCardFeedsList`, {
        circleId: this.circleId,
        signCardId: this._clockinId,
        nickname: this.searchNickname,
        index: pageIndex,
        searchType: this._filterType,
        page: page,
        limit: LIMIT
      }, res => {
        let resData = res;
        if (resData && resData.length > 0) {
          for (let i = 0; i < resData.length; i++) {
            resData[i].createdAt = utilJs.changeCommentTime(resData[i].createdAt);
          }
        }
        res.data.forEach(item => {
          if (Array.isArray(item.resourceList.fileArr)) {
            item.resourceList.fileArr.forEach(fileItem => {
              let suffixStr = circleUtils.getFileSuffix(fileItem.fileName)
              fileItem.fullUrl = global.QINIU_DISPLAY_URL + fileItem.qiniuObject;
              fileItem.suffixClassName = "files-" + (suffixStr ? suffixStr : 'default');
            })
          }
        })
        if (pageIndex == 1) {
          this.feedList = res.data;
        } else {
          this.feedList = [...this.feedList, ...res.data];
        }
        if (res.total * 1 == this.feedList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex += LIMIT;
          // page++;
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR";
      })
    },
    //分享
    wechatShare: function () {
      let title = this.clockinInfo.name;
      let shareImg = this.feedTop.avatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&circleId=${this.circleId}&clockinId=${this._clockinId}`;
      let shareDesc = '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.clockinInfo.name;
      let shareImg = this.feedTop.avatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&circleId=${this.circleId}&clockinId=${this._clockinId}`;
      let shareDesc = '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/scss/circle.scss";
.masker-content {
  background-color: #fff;
  width: 100%;
}
.c-mt-160 {
  margin-top: -4rem;
}
.box-shadow {
  box-shadow: 0px -1px 0px 0px rgba(245, 247, 250, 0.5);
}
.borderL:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--rgbcolor);
  content: "";
}

.border-top {
  padding-top: 0.5rem;
  border-top: 0.5rem solid #f6f6f6;
}
.editor-con-fold {
  height: 10rem;
  overflow: hidden;
}

.mod-footer-nav {
  box-shadow: 0 -4px 8px 0 #f6f6f6;
}
.arrow-rotate {
  position: relative;
  transition: all 0.5s;
  &.fold {
    transform: rotate(-180deg);
  }
}

.permission-none {
  .msg-tip {
    background: #fafafa;
    border: 1px solid #f2f2f2;
    height: 1.5rem;
    margin: 0 0.6rem;
    border-radius: 0.75rem;
    font-size: 0.6rem;
  }
}
.search-input {
  text-align: left;
  border: none;
  height: 1.4rem;
  padding: 0 2.25rem 0 0.6rem;
  width: 100%;
  background: #fff;
  border-radius: 0.7rem;
}
.model-filter {
  padding: 0.8rem 0;
  background: #fff;
  .item {
    font-size: 0.7rem;
    padding: 0.5rem 0;
    text-align: center;
  }
}

.border-l {
  padding-left: 0.45rem;
}
.border-l:before {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
  width: 0.15rem;
  height: 0.55rem;
  border-radius: 0.075rem;
  background: var(--rgbcolor);
  content: "";
}
.lock-icon {
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 100%;
  background: #fff;
  padding: 0.1rem;
  right: -0.65rem;
  bottom: 0;
  border: 0.1rem solid #fff;
  .detail {
    background: #fe7901;
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }
}
</style>